<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>车辆管理</title>
        <link href="/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/a3common.css" rel="stylesheet">
        <link rel="stylesheet" href="/css/login.css">
        <link rel="stylesheet" href="/css/font_43459_lbtux0zjkr6yldi.css">
        <script src="/js/vue.js"></script>
        <script src="/js/axios-0.18.0.js"></script>
        <link rel="stylesheet" href="/plugins/elementui/index.css">
        <script src="/plugins/elementui/index.js"></script>
        <!--导入axios二次封装的工具-->
        <script src="/js/request.js"></script>
    </head>
    <body>
        <div id="app">
            <p></p>
            <!--头部条件查询表单-->
            <el-form :inline="true" :model="queryCarVo" align="center" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" style="background-color: red; width: 100px" icon="el-icon-delete" @click="deleteCarTypeAll">全部删除</el-button>
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-input v-model="queryCarVo.carNumber" placeholder="车牌号"></el-input>
                </el-form-item>
                <el-form-item label="车辆状态">
                    <el-select v-model="queryCarVo.state" placeholder="请选择车辆状态">
                        <el-option label="闲置" :value="1"></el-option>
                        <el-option label="租赁" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用途">
                    <el-select v-model="queryCarVo.carUse" placeholder="请选择车辆用途">
                        <el-option label="物流车" value="物流车"></el-option>
                        <el-option label="班车" value="班车"></el-option>
                        <el-option label="客车" value="客车"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryPageCar">查询</el-button>
                    <el-button  type="primary" @click="showAddCarDialog">添加车辆</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    ref="multipleTable"
                    :data="cars"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <!--多选框-->
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="carType.typeName"
                        label="车辆类型"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="carNumber"
                        label="车牌号"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="dateRegistration"
                        label="上牌日期"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        prop="state"
                        label="租赁状态"
                        show-overflow-tooltip>
                    <!--通过<template slot-scope="scope"> 获取单元格中的数据-->
                    <template slot-scope="scope">
                        <span v-if="scope.row.state == 1">闲置</span>
                        <span v-if="scope.row.state == 0">租赁</span>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="carUse"
                        label="用途"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="showQueryOneDialog(scope.row.id)">查看</el-button>
                        <el-button
                                size="mini"
                                @click="showUpdateDialog(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteCarTypeById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--用于添加或者修改的dialog框-->
            <el-dialog title="添加或者修改" :visible.sync="dialogFormVisible">
                <el-form :model="car">
                    <el-form-item label="车辆类型" label-width="120px">
                        <el-select v-model="car.carType.id" placeholder="请选择">
                            <el-option
                                    v-for="selectedVo in carTypeSelectedVos"
                                    :key="selectedVo.id"
                                    :label="selectedVo.typeName"
                                    :value="selectedVo.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                   <el-form-item label="车牌号" label-width="120px">
                        <el-input v-model="car.carNumber" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="车架号" label-width="120px">
                        <el-input v-model="car.frameNumber" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电机号" label-width="120px">
                        <el-input v-model="car.motorNumber" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="上牌日期" label-width="120px">
                        <el-date-picker
                                v-model="car.dateRegistration"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="车辆状态" label-width="120px">
                        <el-select v-model="car.state" placeholder="请选择车辆状态">
                            <el-option label="闲置" :value="1"></el-option>
                            <el-option label="租赁" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆用途" label-width="120px">
                        <el-select v-model="car.carUse" placeholder="请选择车辆用途">
                            <el-option label="物流车" value="物流车"></el-option>
                            <el-option label="班车" value="班车"></el-option>
                            <el-option label="客车" value="客车"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" label-width="120px">
                        <el-input type="textarea" v-model="car.remarks" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="closeUpdateCarTypeDialog">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateCar">确 定</el-button>
            </el-dialog>
            <!--用于显示详细信息的dialog框-->
            <el-dialog title="车辆类型详细信息" :visible.sync="queryOneDialogVisible">
                <el-table :data="[car]">
                    <el-table-column property="carNumber" label="车牌号"></el-table-column>
                    <el-table-column property="frameNumber" label="车架号"></el-table-column>
                    <el-table-column property="motorNumber" label="点击好"></el-table-column>
                </el-table>
            </el-dialog>
            <!--分页插件-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" style="text-align: center">
            </el-pagination>
        </div>
    </body>
</html>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                queryOneDialogVisible: false,
                /*用于控制dialog框要不要显示*/
                dialogFormVisible: false,
                /*条件查询数据模型*/
                queryCarVo: {},
                /*用于接收分页查询出来的车辆集合*/
                cars: [],
                /*用于接收批量删除选中的行数据*/
                isSelectedRows: [],
                /*定义一个专门用于存放需要删除的行的id的集合*/
                isSelectedRowIds: [],
                /*用于添加、修改、查看单个车辆的数据模型*/
                car: {
                    id: "-1",
                    carType:{}
                },
                /*当前的页面*/
                pageNum: 1,
                /*当前的页面大小*/
                pageSize: 2,
                /*总记录数*/
                total: 0,
                carTypeSelectedVos: [] //车辆类型下拉列表数据模型
            }
        },
        methods:{
            /*多条件分页查询*/
            queryPageCar() {
                request({
                    method: 'post',
                    url: '/car/page/' + this.pageNum + '/' + this.pageSize,
                    data: this.queryCarVo
                }).then(data => {
                    this.cars = data.data.data.result;
                    console.log('当前页面的数据：', this.cars);
                    this.total = data.data.data.totals;
                }).catch(data => {
                    console.log('请求错误：', data)
                })
            },
            /*弹出添加车辆的dialog框*/
            showAddCarDialog() {
                //先把添加的数据模型置为初始值
                this.car = {
                    id: "-1",
                    carType:{} //vue默认只能识别到对象下面的属性，无法识别对象下面对象的属性
                };
                //获取车辆类型下拉列表的数据
                this.queryCarTypeSelected();
                this.dialogFormVisible = true;
            },
            handleSelectionChange(val) {
                //val是一个集合，是当前选中的所有行的数据
                console.log('table select 事件', val)
                this.isSelectedRows = val;
            },
            /*显示查询该行数据详情的数据方法*/
            showQueryOneDialog(id) {
                this.queryCarById(id);
                this.queryOneDialogVisible = true;
            },
            /*显示编辑dialog框的方法*/
            showUpdateDialog(index, row) {
                /*用深拷贝把row里面的数据复制给用于dialog里面数据显示数据模型*/
                /*因为我们查询列表的时候只查询两个字段，修改回显的时候需要修改其他字段，所以在根据id查询一遍*/

                this.queryCarById(row.id);
                this.dialogFormVisible = true;
            },
            queryCarById(id){
                request({
                    method: 'get',
                    url: '/car/' + id
                }).then(data => {
                    this.car = data.data.data;
                    //以后遇到对象里面有对象类型的属性的时候统一判断改对象的对象类型属性是否为null，如果是的话设置为{}
                    if(this.car.carType == null) {
                        /**
                         * this.$set(给谁设置属性或者元素，属性名或者数组下标，设置的数据);
                         */
                        //给对象设置
                        this.$set(this.car, 'carType', {});
                        //如果是数组的话第二个参数就写数组下标
                    }
                    console.log('查询。。。。', this.car);
                })
            },
            deleteCarTypeAll(){},
            closeUpdateCarTypeDialog(){},
            /*关闭添加或者修改的dialog框*/
            closeUpdateCarDialog() {
                this.car = {id: '-1',carType:{}};
                this.dialogFormVisible = false;
            },
            /*添加或者修改的方法*/
            addOrUpdateCar() {
                //首先判断当前的操作是修改还是添加
                if(this.car.id != '-1') {
                } else {
                    //说明是添加操作
                    request({
                        method: 'post',
                        url: '/car',
                        data: this.car
                    }).then(data => {
                        this.$message({
                            type: 'success',
                            message: data.data.message
                        })
                    })
                }
                /*关闭dialog框*/
                this.dialogFormVisible = false;
                /*重新查一遍*/
                this.queryPageCar();
            },
            /*页面大小发生改变触发该方法*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.queryPageCar();
            },
            /*当前的页码发生改变触发该方法*/
            handleCurrentChange(val) {
                this.pageNum = val;
                this.queryPageCar();
            },
            /*查询车辆类型下拉列表的数据*/
            queryCarTypeSelected() {
                request({
                    method: 'get',
                    url: '/carType/select'
                }).then(data => {
                    this.carTypeSelectedVos = data.data.data;
                    console.log("车辆类型下拉列表数据模型：", this.carTypeSelectedVos)
                })
            }
        },
        created(){
            this.queryPageCar();
        }
    });


</script>